<template>
  <div class="link-modal-wrapper" v-if="visible" @click.self="handleClose">
    <div class="link-modal">
      <!-- 标题栏和成功图标 -->
      <div class="modal-header">
        <div class="success-icon">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#4CAF50" />
            <path d="M16.5 8.5L10.5 14.5L7.5 11.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
        <h2 class="modal-title">支付链接生成成功！</h2>
        <button class="close-button" @click="handleClose">×</button>
      </div>
      
      <!-- 商品信息区域 -->
      <div class="product-info">
        <div class="product-image">
          <img :src="product.image" :alt="product.name" />
        </div>
        <div class="product-details">
          <h3 class="product-name">{{ product.name }}</h3>
          <div class="product-restaurant">{{ product.restaurant?.name }}</div>
          <div class="price-comparison">
            <div class="original-price">原价: ¥{{ formatPrice(product.price) }}</div>
            <div class="discount-price">折扣价: ¥{{ formatPrice(discount.discountPrice) }}</div>
            <div class="discount-badge">-{{ discount.discountPercentage }}%</div>
          </div>
          <div class="commission-info">预计佣金: ¥{{ formatPrice(discount.commissionAmount) }}</div>
        </div>
      </div>
      
      <!-- 链接区域 -->
      <div class="link-section">
        <h4 class="section-title">分享以下链接邀请他人支付</h4>
        <div class="link-container">
          <div class="link-url">{{ generatedLink }}</div>
          <button class="copy-button" @click="copyLink">
            <span v-if="!copied">复制</span>
            <span v-else>已复制 ✓</span>
          </button>
        </div>
        
        <!-- 复制成功提示 -->
        <div class="copy-success" :class="{ 'show': copied }">
          链接已复制到剪贴板
        </div>
      </div>
      
      <!-- 二维码区域 -->
      <div class="qrcode-section">
        <h4 class="section-title">二维码</h4>
        <div class="qrcode-container">
          <div ref="qrcode" class="qrcode"></div>
          <button class="download-button" @click="downloadQrCode">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M12 15V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span>下载二维码</span>
          </button>
        </div>
      </div>
      
      <!-- 用户提示 -->
      <div class="payment-info">
        <div class="info-icon">i</div>
        <div class="info-text">
          支付页面将显示："您正在帮助 <strong>{{ discount.customName }}</strong> 支付外卖"
        </div>
      </div>
      
      <!-- 按钮区域 -->
      <div class="modal-footer">
        <button class="preview-button" @click="previewLink">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>预览链接</span>
        </button>
        <button class="done-button" @click="handleClose">完成</button>
      </div>
      
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, defineProps, defineEmits } from 'vue';
// import QRCode from 'qrcode';

interface Product {
  id: string | number;
  name: string;
  price: number;
  image: string;
  restaurant?: {
    name: string;
  };
}

interface DiscountData {
  productId: string | number;
  originalPrice: number;
  discountPrice: number;
  discountPercentage: number;
  commissionAmount: number;
  customName: string;
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  product: {
    type: Object as () => Product,
    required: true
  },
  discount: {
    type: Object as () => DiscountData,
    required: true
  },
  paymentLink: {
    type: String,
    default: ''
  }
});

const emit = defineEmits([
  'close',
  'preview',
  'update:visible'
]);

// 生成一个模拟的链接，实际项目中应使用props.paymentLink
const generatedLink = computed(() => {
  if (props.paymentLink) {
    return props.paymentLink;
  }
  // 这是模拟生成的链接，实际项目中可能是从服务器获取
  return `https://cokfood.com/pay/${props.product.id}?price=${props.discount.discountPrice}&name=${encodeURIComponent(props.discount.customName)}&t=${Date.now()}`;
});

// 复制状态
const copied = ref(false);
const qrcode = ref(null);

// 复制链接
const copyLink = () => {
  navigator.clipboard.writeText(generatedLink.value)
    .then(() => {
      copied.value = true;
      setTimeout(() => {
        copied.value = false;
      }, 2000);
    })
    .catch(err => {
      console.error('复制失败:', err);
      // 作为备选，选择元素的文本
      const el = document.createElement('textarea');
      el.value = generatedLink.value;
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      
      copied.value = true;
      setTimeout(() => {
        copied.value = false;
      }, 2000);
    });
};

// 下载二维码
const downloadQrCode = () => {
  const canvas = document.querySelector('.qrcode canvas') as HTMLCanvasElement;
  if (canvas) {
    const link = document.createElement('a');
    link.download = `cokfood-payment-${props.product.id}.png`;
    link.href = canvas.toDataURL('image/png');
    link.click();
  }
};

// 预览链接
const previewLink = () => {
  emit('preview', generatedLink.value);
  // 实际项目中可能会打开新窗口或在内部页面预览
  window.open(generatedLink.value, '_blank');
};

// 关闭模态框
const handleClose = () => {
  emit('update:visible', false);
  emit('close');
};

// 格式化价格显示
const formatPrice = (price: number): string => {
  return price.toFixed(2);
};

// 在组件挂载时生成二维码
onMounted(() => {
  if (qrcode.value) {
    QRCode.toCanvas(qrcode.value, generatedLink.value, {
      width: 180,
      margin: 1,
      color: {
        dark: '#000000',
        light: '#ffffff'
      }
    }, (error) => {
      if (error) console.error(error);
    });
  }
});
</script>

<style lang="scss" scoped>
.link-modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  overflow-y: auto;
  padding: 20px;
}

.link-modal {
  width: 100%;
  max-width: 500px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  position: relative;
}

.modal-header {
  padding: 24px 20px 20px;
  text-align: center;
  position: relative;
  
  .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #2F3542;
    margin: 0;
  }
  
  .success-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    
    svg {
      width: 100%;
      height: 100%;
    }
  }
  
  .close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: #f5f5f5;
    color: #666;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    
    &:hover {
      background-color: #e0e0e0;
      color: #333;
    }
  }
}

.product-info {
  display: flex;
  padding: 0 20px 20px;
  border-bottom: 1px solid #f5f5f5;
  
  .product-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  
  .product-details {
    margin-left: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    
    .product-name {
      font-size: 16px;
      font-weight: 600;
      color: #2F3542;
      margin: 0 0 4px 0;
    }
    
    .product-restaurant {
      font-size: 13px;
      color: #6C757D;
      margin-bottom: 8px;
    }
    
    .price-comparison {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 4px;
      
      .original-price {
        font-size: 14px;
        color: #6C757D;
        text-decoration: line-through;
      }
      
      .discount-price {
        font-size: 15px;
        font-weight: 600;
        color: #FF4757;
      }
      
      .discount-badge {
        font-size: 12px;
        font-weight: 600;
        color: white;
        background-color: #FF4757;
        padding: 2px 6px;
        border-radius: 4px;
      }
    }
    
    .commission-info {
      font-size: 14px;
      color: #28A745;
      font-weight: 500;
    }
  }
}

.section-title {
  font-size: 15px;
  font-weight: 600;
  color: #2F3542;
  margin: 0 0 12px 0;
}

.link-section {
  padding: 20px;
  border-bottom: 1px solid #f5f5f5;
  
  .link-container {
    display: flex;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    
    .link-url {
      flex: 1;
      padding: 12px 16px;
      font-size: 14px;
      color: #2F3542;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background-color: #f8f9fa;
    }
    
    .copy-button {
      min-width: 80px;
      padding: 0 16px;
      border: none;
      background-color: #FF4757;
      color: white;
      font-weight: 600;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
      
      &:hover {
        background-color: darken(#FF4757, 8%);
      }
    }
  }
  
  .copy-success {
    font-size: 13px;
    color: #28A745;
    margin-top: 8px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    
    &.show {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.qrcode-section {
  padding: 20px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .qrcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .qrcode {
      width: 180px;
      height: 180px;
      margin-bottom: 16px;
      border: 1px solid #eee;
      border-radius: 4px;
      padding: 6px;
      background-color: white;
      
      canvas {
        width: 100%;
        height: 100%;
      }
    }
    
    .download-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 8px 16px;
      border: 1px solid #ddd;
      border-radius: 6px;
      background-color: #f8f9fa;
      color: #2F3542;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      
      &:hover {
        background-color: #eee;
        border-color: #ccc;
      }
      
      svg {
        width: 18px;
        height: 18px;
      }
    }
  }
}

.payment-info {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  border-bottom: 1px solid #f5f5f5;
  
  .info-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #6C757D;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    margin-top: 2px;
    margin-right: 10px;
  }
  
  .info-text {
    font-size: 14px;
    color: #6C757D;
    line-height: 1.5;
    
    strong {
      color: #FF4757;
    }
  }
}

.modal-footer {
  padding: 20px;
  display: flex;
  justify-content: center;
  gap: 16px;
  border-bottom: 1px solid #f5f5f5;
  
  .preview-button, .done-button {
    height: 44px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .preview-button {
    background-color: white;
    color: #2F3542;
    border: 1px solid #ddd;
    gap: 8px;
    
    svg {
      width: 18px;
      height: 18px;
      color: #2F3542;
    }
    
    &:hover {
      background-color: #f5f5f5;
      transform: translateY(-2px);
    }
  }
  
  .done-button {
    background-color: #FF4757;
    color: white;
    border: none;
    
    &:hover {
      background-color: darken(#FF4757, 8%);
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(255, 71, 87, 0.3);
    }
  }
}

.share-section {
  padding: 20px;
  text-align: center;
  
  .share-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    
    .share-button {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.2s;
      
      svg {
        width: 24px;
        height: 24px;
      }
      
      &:hover {
        transform: translateY(-3px);
      }
      
      &.wechat {
        background-color: #09B83E;
        color: white;
        
        &:hover {
          background-color: darken(#09B83E, 8%);
          box-shadow: 0 4px 10px rgba(9, 184, 62, 0.3);
        }
      }
      
      &.weibo {
        background-color: #E6162D;
        color: white;
        
        &:hover {
          background-color: darken(#E6162D, 8%);
          box-shadow: 0 4px 10px rgba(230, 22, 45, 0.3);
        }
      }
      
      &.qq {
        background-color: #12B7F5;
        color: white;
        
        &:hover {
          background-color: darken(#12B7F5, 8%);
          box-shadow: 0 4px 10px rgba(18, 183, 245, 0.3);
        }
      }
      
      &.more {
        background-color: #F2F2F2;
        color: #666;
        
        &:hover {
          background-color: darken(#F2F2F2, 8%);
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}

// 响应式适配
@media (max-width: 576px) {
  .link-modal {
    max-width: 100%;
    border-radius: 12px;
  }
  
  .modal-header {
    padding: 20px 16px 16px;
    
    .success-icon {
      width: 50px;
      height: 50px;
      margin-bottom: 12px;
    }
  }
  
  .product-info, 
  .link-section, 
  .qrcode-section, 
  .payment-info, 
  .modal-footer,
  .share-section {
    padding: 16px;
  }
  
  .product-info {
    .product-image {
      width: 70px;
      height: 70px;
    }
  }
  
  .qrcode-section .qrcode-container .qrcode {
    width: 160px;
    height: 160px;
  }
  
  .modal-footer {
    flex-direction: column;
    
    .preview-button, .done-button {
      width: 100%;
    }
  }
}
</style> 